<template>
  <a-form ref="formObj"
          :model="formData"
          :rules="formRule">
    <a-form-item v-for="column in columns" :label="column.title" :name="column.dataIndex">
      <!--生成器基础类型-->
      <a-input v-if="column.formType === 'Long' || column.formType === 'String'
       || column.formType === 'LocalDate' || column.formType === 'LocalTime'"
               v-model:value="formData[column.dataIndex]"
               :placeholder="column.placeholder" :disabled="column.disabled"/>
      <a-switch v-if="column.formType === 'Boolean'"
                v-model:checked="formData[column.dataIndex]"
                :disabled="column.disabled"/>
      <a-input-number v-if="column.formType === 'Integer'"
                      v-model:value="formData[column.dataIndex]"
                      :disabled="column.disabled" class="width-style"/>
      <!--自定义扩展类型-->
      <a-select v-if="column.formType === 'Select'" v-model:value="formData[column.dataIndex]"
                :placeholder="column.placeholder" :mode="column.mode"
                :disabled="column.disabled" class="width-style">
        <a-select-option v-for="option in column.options" :value="option.id">{{ option.name }}</a-select-option>
      </a-select>
      <a-cascader v-if="column.formType === 'Cascade'" v-model:value="formData[column.dataIndex]"
                  :fieldNames="column.fieldNames?column.fieldNames:{value: 'id',label: 'name', children: 'children'}"
                  :placeholder="column.placeholder" :mode="column.mode" :options="column.options"
                  :changeOnSelect="column.lastLevel?column.lastLevel:true" :disabled="column.disabled"
                  class="width-style">
      </a-cascader>
    </a-form-item>
  </a-form>
</template>
<script>
import {defineComponent, ref, reactive, toRaw} from 'vue';

export default defineComponent({
  name: 'maxForm',
  setup(props, context) {
    /**
     * 变量列表：
     * formObj：表单对象
     * columns：表单列队
     * data：表单数据
     */
    const formObj = ref();
    const columns = reactive([]);
    /**
     * 方法列表：
     * columnChange：表单列改变
     * formValidate：表单验证
     */
    const columnChange = () => {
      columns.length = 0;
      columns.push(...props.formColumns.filter(column => column.formShow === true));
    };
    const formValidate = (event) => {
      formObj.value.validate().then(() => {
        context.emit(event, toRaw(props.formData));
      }).catch(error => {
        console.log('error', error);
      });
    };
    /**
     * 初始化
     */
    columnChange();

    return {
      formObj,
      columns,
      formValidate
    };
  },
  props: {
    formColumns: {
      type: Array,
      default: []
    },
    formRule: {
      type: Object,
      default: {}
    },
    formData: {
      type: Object,
      default: {}
    }
  }
});
</script>
<style scoped>
.width-style {
  width: 100%;
}
</style>